<template>
	<view class="user">
		<view class="user-header">
			<view class="user-header-left" @tap="handleLogin">
				<view class="user-nickname">
					{{userInfo.nick}}
				</view>
				<view class="user-phone">
					{{userInfo.member_id}}
				</view>
			</view>
			<view class="user-header-right">
				<cmd-avatar :src="userInfo.member_image" size="lg" :make="{'background-color': '#fff'}"></cmd-avatar>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="user-order">
			<cmd-cell-item arrow hoverClass="hover" url="/pages/user/order/order" title="我的订单" @click="handleInvoke">
			</cmd-cell-item>
			<view class="user-item">
				<uni-grid :column="4" :show-border="false"  :square="false">
					<uni-grid-item v-for="(item,index) in orderMenu" :key="index">
						<view @click="invokeOrder(item)">
							<view class="item-icon">
								<image :src="item.image" mode="widthFix"></image>
							</view>
							<view class="item-name">
								<text>{{item.lable}}</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="user-tool">
			<cmd-cell-item hoverClass="hover" title="我的工具" >
			</cmd-cell-item>
			<view class="user-item">
				<uni-grid :column="4" :show-border="false"  :square="false">
					<uni-grid-item v-for="(item,index) in toolMenu" :key="index">
						<view @click="handleInvoke(item)">
							<view class="item-icon">
								<image :src="item.image" mode="widthFix"></image>
							</view>
							<view class="item-name">
								<text>{{item.lable}}</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="user-wallet">
			<cmd-cell-item hoverClass="hover" title="我的钱包" >
			</cmd-cell-item>
			<view class="user-item">
				<uni-grid :column="4" :show-border="false"  :square="false">
					<uni-grid-item v-for="(item,index) in walletMenu" :key="index">
						<view class="item-icon">
							<image :src="item.image" mode="widthFix"></image>
						</view>
						<view class="item-name">
							<text>{{item.lable}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<!-- 邀请有礼 -->
		<view class="user-invite">
			<view class="invite-box">
				<view class="invite-title">
					邀请有礼
				</view>
				<view class="invite-desc">
					好友下单最高得￥500购物券
				</view>
			</view>
			<view class="invite-img">
				<image src="../../static/logo.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<view class="user-guize">
			<cmd-cell-item hoverClass="hover" title="平台规则" >
			</cmd-cell-item>
			<cmd-cell-item arrow class="cell-item" url="/pages/user/information/clause" title="条款条件" @click="handleInvoke">
			</cmd-cell-item>
			<cmd-cell-item arrow class="cell-item" url="/pages/user/information/privacy" title="隐私条款" @click="handleInvoke">
			</cmd-cell-item>
			<cmd-cell-item arrow class="cell-item" url="/pages/user/information/policy" title="个人敏感信息政策" @click="handleInvoke">
			</cmd-cell-item>
		</view>
		
		<view class="user-contact">
			<cmd-cell-item hoverClass="hover" title="联系我们" >
			</cmd-cell-item>
			<view class="user-item contact-box">
				<uni-grid :column="2" :show-border="false"  :square="false">
					<uni-grid-item v-for="(item,index) in contactMenu.list" :key="index">
						<view class="item-icon">
							<image :src="item.image" mode="widthFix"></image>
						</view>
						<view class="item-name">
							<text>{{item.lable}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="contact-box">
				<view class="tel">
					<text>中文热线电话：10000111-0000222</text>
				</view>
				<view class="tel">
					<text>10000111-0000222</text>
				</view>
			</view>
			<view class="contact-box">
				<view class="tel">
					<text>中文热线电话：10000111-0000222</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
	import cmdCellItem from "@/components/cmd-cell-item/cmd-cell-item.vue"
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	import {globalMixin} from '@/util/globalMixin.js'
	import {getLoginUserDetail} from '@/api/user.js'
	export default {
		mixins:[globalMixin],
		components: {
			cmdAvatar,
			cmdCellItem,
			uniGrid,
			uniGridItem
		},
		data() {
			return {
				serviceUrl:'',
				userInfo: {
					nick: '未登录',
					member_id: '未登录',
					member_image:"",
				},
				contactMenu: {
					list: [
						{
							lable: '微信',
							image: '../../static/images/icon/icon-wechat.png',
							url: ''
						},
						{
							lable: '电话',
							image: '../../static/images/icon/icon-phone.png',
							url: ''
						},
					]
				},
				toolMenu: [
					{
						lable: '最近浏览',
						image: '../../static/images/icon/icon-history.png',
						url: '/pages/user/history/history'
					},
					{
						lable: '地址管理',
						image: '../../static/images/icon/icon-history.png',
						url: '/pages/user/address/address'
					},
				],
				walletMenu: [
					{
						lable: '邀请奖励',
						image: '../../static/images/icon/icon-award.png',
						url: '/pages/user/award/award'
					},
				],
				orderMenu: [
					{
						lable: '确认中',
						image: '../../static/images/icon/icon-confirm.png',
						url: '/pages/user/order/order?status=1'
					},
					{
						lable: '已发货',
						image: '../../static/images/icon/icon-delivered.png',
						url: '/pages/user/order/order?status=2'
					},
					{
						lable: '已完成',
						image: '../../static/images/icon/icon-delivered.png',
						url: '/pages/user/order/order?status=3'
					},
					{
						lable: '退货',
						image: '../../static/images/icon/icon-return.png',
						url: '/pages/user/order/order?status=4'
					}
				]
			}
		},
		onShow() {
			this.initLoginUser()
		},
		methods: {
			handleLogin() {
				console.log(this.userInfo)
				if(!this.userInfo || !this.userInfo.main_user_id) {
					// 未登录
					uni.navigateTo({
					    url: '/pages/user/login'
					});
				}
			},
			initLoginUser() {
				// 初始化登陆了用户
				let user = this.getTokenUser()
				if(this.validateToken() && user && user.member_id) {
					this.userInfo = user
					let result = getLoginUserDetail({uid:this.userInfo.member_id})
					result.then(res=>{
						if(res.code == 0) {
							this.userInfo = res.data
						} else {
							this.userInfo = {
								nick: '未登录',
								member_id: '未登录',
								member_image:"",
							}
						}
					})
				} else {
					this.userInfo = {
						nick: '未登录',
						member_id: '未登录',
						member_image:"",
					}
				}
			},
			handleInvoke(option) {
				let invoke = option.url
				if(invoke) {
					uni.navigateTo({
					    url: invoke
					});
				}
			},
			invokeOrder: function(item) {
				if(item.url) {
					uni.navigateTo({
					    url: item.url
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.user {
		background-color: #F4F4F4;
		.user-header {
			background:rgba(255,255,255,1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 200rpx;
			padding: 0 40rpx;
			.user-header-left {
				.user-nickname {
					font-size: 42rpx;
					font-weight: 530;
				}
				.user-phone {
					font-size: 24rpx;
					font-weight: 500;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
		.user-order {
			background:rgba(255,255,255,1);
			padding-top: 40rpx;
		}
		.user-tool,.user-wallet,.user-invite,.user-guize,.user-contact {
			margin-top: 20rpx;
			background:rgba(255,255,255,1);
		}
		.user-item {
			margin-top: 40rpx;
			text-align: center;
			font-size: 24rpx;
			.item-icon {
				image {
					width: 52rpx;
					height: 52rpx;
				}
			}
			.item-name {
				margin-top: 10rpx;
			}
			padding-bottom: 40rpx;
		}
		.user-invite {
			padding: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 120rpx;
			.invite-img {
				image {
					height: 120rpx;
					width: 120rpx;
				}
			}
			.invite-box {
				.invite-desc {
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #df8622;
				}
			}
		}
		.user-contact .contact-box {
			padding: 20rpx 0;
			.tel {
				font-size: 24rpx;
				text-align: center;
				color: #aaa;
			}
		}
		.cell-item {
			font-size: 30rpx;
		}
	}
</style>
